<template>
    <div class="innerTableRow">
        <div class="text">{{i18n('overtake','大于')}}:</div>
        <div class="content">
            <a-input v-model="start"></a-input>
        </div>
        <div class="text">{{i18n('under','小于')}}:</div>
        <div class="content">
            <a-input v-model="end"></a-input>
        </div>
    </div>

</template>

<script>
    export default {
        name: "rx-between",
        props:{
            value:{
                type:String,
                default:"{\"start\":\"\",\"end\":\"\"}"
            }
        },
        data(){
            return {
                labelCol: { span:6 },
                wrapperCol: { span:18 },

                start:"",
                end:""
            }
        },
        created(){
            this.init();
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"formCellRender",key);
            },
            init(){
                var json=JSON.parse(this.value);
                this.start=json.start;
                this.end=json.end;
            },
            emitVal(){
                var json={"start":this.start,"end":this.end};
                var jsonStr=JSON.stringify(json);
                this.$emit("input",jsonStr);

            }
        },
        watch:{
            "start":function (val,oldVal) {
                this.emitVal();
            },
            "end":function (val,oldVal) {
                this.emitVal();
            },
            "value":function (val,oldVal) {
                this.init();
            }
        }

    }
</script>

<style scoped>
.innerTableRow{
    display: flex;
    align-items: center;
}
.content{
    flex: 1;
}

</style>